<template>
  <div class="containerDiv" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.batchCode" placeholder="波次号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuType" placeholder="波次分类" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.batchPloyName" placeholder="波次策略" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"

                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>

    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="batchCode" width="150" title="波次号">

      </vxe-column>
      <vxe-column field="skuType" width="100" title="波次分类">
        <template #default="{row}">
          <div v-if="row.skuType=='1'">同品</div>
          <div v-else>
            {{row.skuType}}品
          </div>
        </template>
      </vxe-column>
      <vxe-column field="printStatus" width="100" title="打印状态">
        <template #default="{row}">
          <div v-if="row.printNum==0">待打印</div>
          <div v-else-if="row.printNum >0">
             已打印
          </div>
        </template>
      </vxe-column>
      <vxe-column field="printNum" min-width="400" title="商品信息">
        <template #default={row}>
          <div v-for="(item,index) in row.orderDetailList" :key="index" style="display: flex;">
            <div style="width: 180px;">
              <ImagePreview  :width="150" :height="50" :src="row.skuImg" ></ImagePreview>
            </div>
            <div style="width: 200px;text-align: left">
              {{item.skuName}}
            </div>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="batchPloyName" width="120" title="波次策略"></vxe-column>
      <vxe-column field="orderNum" width="100" title="订单数量"></vxe-column>
      <vxe-column field="skuType" width="100" title="商品品类"></vxe-column>
      <vxe-column field="skuNum" width="100" title="拣货数量"></vxe-column>
      <vxe-column field="createTime" width="220" title="生成时间"></vxe-column>
      <vxe-column field="printTime" width="220" title="打印时间"></vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

  </div>
</template>

<script setup>

import {nextTick, onMounted, ref} from "vue";
import {getBatchDetail, getBatchList} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";
import PickGoodsDialog from "@/views/outStorage/wavePick/pickGoodsDialog.vue";

const {proxy} = getCurrentInstance()
let timeData = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
let total = ref(0)

let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 330;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 330;
}
let loading = ref(false)
let tableList = ref([])

function getList() {
  loading.value = true
  queryParams.value.startTime = timeData.value[0]
  queryParams.value.endTime = timeData.value[1]
  queryParams.value.printStatus =1
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getBatchList(params).then(res => {
    loading.value = false
    tableList.value = res.data
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}

onMounted(()=>{
  getList()
})

const resetQuery = () => {
  timeData.value = []
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};


</script>

<style scoped lang="scss">
.containerDiv {
  padding: 0 20px;
  height: calc(100vh - 90px);
}
</style>